<?php use_helper('rutas') ?>
<?php use_javascript('reservacion.js') ?>

<script type="text/javascript">
    $(document).ready(function()
    {                                               
        $("#myButton").click(function() {  
            $.ajax({ 
                url: '<?php echo url_for('reservaciones/graba') ?>',
                type: 'POST',
                data: { 
                    cooperativa : $('#cooperativa').attr('value'), 
                    ruta : $('#ruta').attr('value'), 
                    dia : $('#dias').attr('value'), 
                    frecuencia : $('#frecuencia').attr('value'), 
                    escala : $('#escala').attr('value'), 
                    cedula : $('#cedula').attr('value'),
                    nombre : $('#nombres').attr('value'),
                    apellido: $('#apellidos').attr('value'),
                    telefono : $('#telefono').attr('value'), 
                    email: $('#email').attr('value'), 
                    asientos: $('#asientos').attr('value')
                },
                dataType: 'json',
                cache: false,                                 
                beforeSend: function () {
                    alert('Ejecutando Reservación');
                },
                success:  function (data) {
                    if (data['status'] == 'ok') {
                        alert('Se realizó con éxito la reservación');
                    } else {
                        alert(data['message']);
                    }
                },
                error:  function () {
                    alert('Ha ocurrido un error al guardar la reservación');
                }
            });                    
        }).change(function()
        {               
        });
    });         
</script>               
<form method="POST"> 
    <div align="center">
        <h1><b>HAGA SU RESERVACION Hora: <?php echo date('H:i') ?></b></h1>
        <h1>Fecha <?php echo date('d-m-Y'); ?></h1>
        <br></br>
        
        <table style="width:100%">
            <tbody>
                <tr>
                    <td style="width:50%"><b>Seleccione en que Cooperativa desea viajar para buscar sus rutas disponibles</b></td>
                    <td>
                        <select name="cooperativa" id="cooperativa">
                            <option value=""> Seleccione una cooperativa </option>                    
                            <?php if (!empty($cooperativas)): ?>
                                <?php foreach ($cooperativas as $coops): ?>
                                    <option value="<?php echo $coops->getIdCo() ?>"><?php echo $coops->getNombre() ?></option>                   
                                <?php endforeach; ?>
                            <?php else: ?>
                                <option >No existe ninguna cooperativa en el sistema</option>
                            <?php endif ?>
                        </select>
                    </td>
                </tr>

                <tr>
                    <td><b>Seleccione en que ruta desea realizar su viaje  </b></td>
                    <td>
                        <select name="ruta" id="ruta">                     
                            <option >Seleccione una cooperativa para cargar las rutas</option>
                        </select>    
                    </td>
                </tr>

                <tr>
                    <td ><b>Seleccione el dia de Salida</b></td>
                    <td>
                        <select name="dias" id="dias">
                        <?php for ($i = $date['mday']; $i <= $dias_mes; $i++): ?>
                            <option value="<?php echo $i ?>"><?php echo $i ?></option>                                                               
                        <?php endfor ?>
                        </select>                     
                        <span>de <?php echo mes_texto(date('n')), ' de ', date("Y") ?></span>
                    </td>
                </tr>

                <tr>
                    <td><b>Seleccione en que horario desea realizar su viaje</b></td>
                    <td>
                        <select name="frecuencia" id="frecuencia">                     
                            <option >Seleccione la ruta para cargar sus horarios disponibles</option>
                        </select>    
                    </td>
                </tr>

                <tr>
                    <td><b>Seleccione lugar de destino </b></td>
                    <td>
                        <select name="escala" id="escala">
                            <option >Seleccione una frecuencia para cargar las escalas con sus valores</option>
                        </select>  
                    </td>      
                </tr>                    
            </tbody>
        </table>            
        
        <br></br>
        <div align="center">
            <h1>Ingrese sus datos Personales</h1>
            <table>
                <tbody>
                    <tr>
                        <td><b>C.I.:&nbsp;</b></td>
                        <td><input name="cedula" id="cedula"class="valor" value="" /></td>   
                    </tr>
                    <tr>
                        <td><b>Nombres:&nbsp;</b></td>
                        <td>
                            <input class="valor" id="nombres" name="nombres" value="" disabled="disabled" />  
                        </td>
                    </tr>

                    <tr>
                        <td><b>Apellidos:&nbsp;</b></td>
                        <td>
                            <input class="valor" id="apellidos" name="apellidos" value="" disabled="disabled" /> 
                        </td>
                    </tr>
                    <tr>
                        <td><b>Telefono:&nbsp;</b></td>
                        <td><input class="valor"  id="telefono" name="telefono" value="" disabled="disabled" />                                  
                        </td>
                    </tr>
                    <tr>                            
                        <td><b>Correo Electronico:&nbsp;</b></td>                            
                        <td>
                            <input type="text" name="email" id="email" disabled="disabled" />
                        </td>                           
                    </tr>
                </tbody>
            </table>
        </div>

        <br></br>

        <h1>Seleccione el asiento</h1>

        <table align="center" border="3">
            <tr id="cabtabla">
                <td><div align="center"><font size="5">Número de asientos</font></div></td>               
            </tr >
            <tr id="cabtabla">
                <td><div align="center"><select style="width:100%" id="asientos" name="asientos"><option value="1">1 asiento</option><option value="2">2 asientos</option></select></div><div class="spritesasientoautobus" id="asientoautobus_jpg"></div></td>
            </tr>
        </table>

        <br></br>
    </div>  
    <div align="center">
        <input class="button2 button-azul " type="button" id="myButton" value="Reservar" /><br><br>
    </div>
</form>
<div align="center">
    <a href="<?php echo url_for('reservaciones/index') ?>"><button type="submit" class="button2 button-azul" title="Cancelar la reservacion"><div class="spritesdelete" id="delete_jpg"></div>Cancelar</button></a>
    <a href="<?php echo url_for('inicio/index') ?>"><button type="submit" class="button2 button-azul" title="Volver a opciones de Boleteria"><div class="spritesatras" id="atras_jpg"></div>Volver a P&aacute;gina Principal</button></a><br></br>
</div>